<template>
  <el-card shadow="hover">
    <template #header>
      <div class="flex justify-between">
        <span class="text-sm">{{ title }}</span>
        <el-tag effect="plain" class="mr-1">
          {{ tip }}
        </el-tag>
      </div>
    </template>
    <div ref="el" id="bar-vert" style="width: 100%;height: 300px;"></div>
  </el-card>
</template>


<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'
import {useResizeObserver} from '@vueuse/core'
import {unify} from '../utils'

// import {getAttackType, getLiuLiang} from '~/api/test.js'
import {getLiuLiang} from '~/api/base.js'

defineProps({
  title: String,
  tip: String,
  // btns: Array
})

let myChart = null
let chartDom = null
onMounted(() => {
  chartDom = document.getElementById('bar-vert')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})
onBeforeUnmount(() => {
  if (myChart) echarts.dispose(myChart)
})
// "#e5d6bd"


function getData() {
  
  const ec_data = []
  const ec_head = []
  const colors = ["#b52a6f", "#ffb92e", "#21eb42", "#f44e21"]
  let option = {
    xAxis: {
      max: 'dataMax',
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 14,
        lineStyle: {
          color: "#fff",
        },
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      type: 'category',
      data: ec_head,
      axisTick: {
        show: true,
        alignWithLabel: true
      },
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max: 4, // only the largest {max} bars will be displayed
      axisLine: {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: 14,
        lineStyle: {
          color: "#252525",
        },
      },
    },
    series: [
      {
        realtimeSort: true,
        // name: 'X',
        type: 'bar',
        data: ec_data,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        },
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  }
  getLiuLiang().then(res => {
    console.log('level_bar_res', res)
    const rdata = res.results
    // console.log('rdata', rdata)
    const rdata2 = unify(rdata)
    // console.log('rdata2', rdata2)
    const rd3 = rdata2.protocol.map(item => item ? item : "未知协议")

    // console.log('rd3', rd3)
    function toData() {
      // 创建一个空对象来存储结果
      const result = {};

      // 遍历数组，对每个元素进行计数
      for (let i = 0; i < rd3.length; i++) {
        const item = rd3[i];

        // 如果对象中已经存在该元素，则增加计数
        if (result[item]) {
          result[item]++;
        }
        // 否则，在对象中创建该元素，并将计数初始化为1
        else {
          result[item] = 1;
        }
      }
      // 将结果转换为所需的格式
      for (const key in result) {
        ec_data.push({
          value: result[key], itemStyle: {
            color: colors[Math.floor(Math.random() * colors.length)],
          }
        });
        ec_head.push(key)
      }
    }

    toData(rd3)
    console.log('ec_data', ec_data)
    myChart.setOption(option)
  }).catch(err => {
    throw err
  })
    .finally(() => {
      myChart.hideLoading()
    })

  myChart.showLoading()
}


// echarts
const el = ref(null)
useResizeObserver(el, entries => myChart.resize())
</script>

<style scoped>

</style>